<template>
    <div id="turntable_page">
        <el-row class="prize-content" type="flex" justify="space-around"
                style="flex-wrap:wrap;">
            <el-col class="prize-item">
                <div class="img-content">
                    <img :src="prizeList[0].cover" alt="">
                </div>
                <span>{{prizeList[0].name}}</span>
            </el-col>
            <el-col class="prize-item">
                <div class="img-content">
                    <img :src="prizeList[1].cover" alt="">
                </div>
                <span>{{prizeList[1].name}}</span>
            </el-col>
            <el-col class="prize-item">
                <div class="img-content">
                    <img :src="prizeList[2].cover" alt="">
                </div>
                <span>{{prizeList[2].name}}</span>
            </el-col>
            <el-col class="prize-item">
                <div class="img-content">
                    <img :src="prizeList[3].cover" alt="">
                </div>
                <span>{{prizeList[3].name}}</span>
            </el-col>
            <el-col class="prize-item">
                <div class="img-content">
                    <img :src="prizeList[4].cover" alt="">
                </div>
                <span>{{prizeList[4].name}}</span>
            </el-col>
            <el-col class="prize-item" style="background: transparent"></el-col>
        </el-row>
        <div class="right-content">
            <img class="qr-code" src="../assets/images/background/qrcode.jpg" alt="">
            <!--<p class="num">参与人数：17人</p>-->
            <!--<el-row :gutter="25" class="avatar-contain">-->
            <!--<el-col :span="4" v-for="img in imgList">-->
            <!--<img :src="img" class="avatar" alt="" width="100%" height="100%">-->
            <!--</el-col>-->
            <!--</el-row>-->
        </div>

        <transition name="el-zoom-in-center">
            <div v-show="$store.state.btnShow.turntableResultShow" class="popup" @click="popUpClose">
                <div class="table-content">
                    <div class="table-header">
                        <img src="../assets/images/turntable/table-header.png" alt="">
                    </div>
                    <el-table :data="$store.state.turntable.turntableResultList" :show-header="false"
                              style="width: 100%; text-align: center"
                              :row-class-name="tableRowClassName">
                        <el-table-column>
                            <template slot-scope="scope">
                                <img :src="scope.row.user.head_img" alt=""
                                     style="height: 5rem;border-radius: 50%;border: .2rem solid #f7cc8b">
                            </template>
                        </el-table-column>
                        <el-table-column>
                            <template slot-scope="scope">
                                <p style="color:#80191e;font-size: 2rem;font-weight: bold">{{scope.row.user.name}}</p>
                            </template>
                        </el-table-column>
                        <el-table-column>
                            <template slot-scope="scope">
                                <p style="color:#80191e;font-size: 2rem;font-weight: bold">{{scope.row.prize.name}}</p>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </transition>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                prizeList: [],
                popUpShow: false
            }
        },
        mounted: function () {
            // 获取奖品列表
            this.$http.get('/api/wheels').then(response => {
                const id = response.data.wheels[0].id
                this.$http.get('/api/wheel/show/' + id).then(response => {
                    console.log(response)
                    this.prizeList = response.data.wheel.prizes
                }, response => {
                    console.log(response)
                })
            }, response => {
                console.log(response)
            })
//
//            // 获取签到者列表
//            this.$http.get('/api/signs').then(response => {
//                this.userList = response.data.users
//            }, response => {
//                console.log(response)
//            })
        },
        methods: {
            popUpClose() {
                this.$store.commit('storageTurntableResultShow', false)
            },
            tableRowClassName({row, rowIndex}) {
                if (rowIndex % 2 === 1) {
                    return 'warning-row';
                } else if (rowIndex % 2 === 0) {
                    return 'success-row';
                }
                return '';
            }
        }
    }
</script>

<style scoped>
    #turntable_page {
        position: relative;
        width: 100%;
        height: 100%;
        background: url("../assets/images/turntable/turntable.jpg");
        background-size: 100% 100%;
    }

    .prize-content {
        position: absolute;
        top: 42%;
        left: 15%;
        width: 43%;
        height: 35%;
        padding: 0;
    }

    .prize-item {
        position: relative;
        width: 22%;
        background: #ffde85;
        border-radius: 7%;
        overflow: hidden;
        margin: 1rem;
    }

    .prize-item .img-content {
        position: absolute;
        width: 100%;
        height: 75%;
        text-align: center;
    }

    .prize-item img {
        height: 100%;
    }

    .prize-item span {
        position: absolute;
        width: 100%;
        height: 25%;
        bottom: 0;
        background: #b85f03;
        color: #fff;
        font-size: 1.2rem;
        font-weight: bold;
        display: -webkit-flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .prize-item .center {
        width: 0;
        height: 100%;
        vertical-align: middle;
    }

    .right-content {
        position: absolute;
        top: 42%;
        right: 14%;
        width: 20%;
        height: 50%;
        text-align: center;
        overflow: hidden;
    }

    .qr-code {
        max-width: 100%;
        max-height: 100%;
    }

    .num {
        text-align: left;
        font-size: 2rem;
        color: #80191e;
        font-weight: bold;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .avatar-contain {
        overflow: hidden;
    }

    .avatar {
        border: 2px solid #f7cc8b;
        border-radius: 50%;
    }

    .popup {
        position: absolute;
        width: 100%;
        height: 100%;
        background: url("../assets/images/turntable/result.jpg");
        background-size: 100% 100%;
    }

    .table-content {
        margin: 13% auto;
        width: 60%;
        height: 60%;
        background: #f7f5da;
        border: 1rem solid #f8ce8e;
        border-radius: .8rem;
        overflow-y: auto;
    }

    .table-header {
        padding: 1rem 0;
        text-align: center;
    }

    .warning-row {
        background-color: red !important;
    }

    .success-row {
        background-color: blue !important;
    }

    .popup .el-table td {
        color: #80191e;
        border: none !important;
    }

    .el-table .cell {
        line-height: inherit;
    }
</style>
